<template>
  <div class="container">
    <div class="container_page">
      <page-header :title="$t('order_order')"></page-header>
      <div class="page_body">
        <van-pull-refresh
          v-model="loading"
          @refresh="onRefresh"
          :loading-text="$t('Loading')"
          :pulling-text="$t('Loading')"
          :loosing-text="$t('Loading')"
        >
          <template v-if="list.length != 0">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="
                list.length == 0 ? $t('error_empty') : $t('No_more')
              "
              @load="loadData"
            >
              <div
                class="card"
                v-for="item in list"
                :key="item.orderNo"
                @click="toDetailPage(item.orderNo)"
              >
                <div class="message">
                  <div class="left">
                    <div class="order_status">
                      <div
                        class="dot"
                        :class="[orderStatusMap[item.state]]"
                      ></div>
                      <div class="status">
                        {{ $t(orderStatusMap[item.state]) }}
                      </div>
                    </div>
                    <div class="order_brief">
                      {{ item.createTime | dateformat }}
                    </div>
                    <div class="order_brief">
                      {{ item.rentBranchName | stateFormats }}
                    </div>
                  </div>

                  <div class="right flex_center" v-if="item.state == 2">
                    <div class="order_amount">
                      {{ item.money | amountFormats($currencyVal.symbol) }}
                    </div>
                  </div>
                  <div class="right flex_center" v-else-if="item.state == 5">
                    <div class="order_amount">
                      {{
                        item.orderAmount | amountFormats($currencyVal.symbol)
                      }}
                    </div>
                  </div>
                  <div class="right flex_center" v-else>
                    <div class="order_amount">
                      {{ item.realAmount | amountFormats($currencyVal.symbol) }}
                    </div>
                  </div>
                </div>
                <div class="action" v-if="item.state == 2">
                  <div class="to_pay" @click.prevent.stop="toPayPage(item)">
                    <div>{{ $t("home_gotoPay") }}</div>
                    <img :src="require('@/assets/img/order/right-arrow.svg')" />
                  </div>
                </div>
              </div>
            </van-list>
          </template>
          <div
            v-else
            style=" height: calc(100vh - var(--page-header-height));box-sizing: border-box;"
          >
            <empty-data orderType></empty-data>
          </div>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import $api from "@/assets/js/api/index";
import share from "@/mixins/share";
export default {
  mixins: [share],
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      pageOffset: -20,
      list: [],
      orderStatusMap: {
        0: "Order_status_init", //初始化
        1: "home_renting", //租借中
        2: "order_pendingPayment", //待支付
        3: "points_completed", //已完成
        4: "shop_cancelled", //已取消
        5: "shop_underInvestigation", //调查中
        6: "points_completed", //已退款 (这下面几个显示已完成)
        7: "points_completed", //已报失
        8: "points_completed" //已购买
      }
    };
  },
  created() {
    this.getLang();
  },
  methods: {
    loadData() {
      if (!this.finished) this.pageOffset += 20;
      $api.order
        .getList({state:''}, { index: this.pageOffset }, this.refreshing)
        .then(res => {
          if (res.code != "0") {
            this.global.toast(res.message);
            this.loading = false;
            this.finished = true;
            return;
          }
          if (res.data.length < 20) {
            this.finished = true;
          }
          if (this.refreshing) {
            this.refreshing = false;
            this.list = res.data;
          } else {
            this.list.push(...res.data);
          }
          this.loading = false;
        });
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.loading = true;
      this.pageOffset = -20;
      this.loadData();
    },
    toDetailPage(orderNo) {
      this.$router.push({ path: "/order/detail", query: { orderNo } });
    },
    toPayPage(item) {
      let type = item.state;
      if (item.state == 2) type = 1;
      // 购买
      if (item.state == 8 || item.processState == 2) type = 7;
      this.$router.push({
        path: "/pay/way",
        query: { type, orderNo: item.orderNo }
      });
    }
  },
  mounted() {
    this.loadData();
  },
  computed: {}
};
</script>
<style scoped lang="scss">
.container {
  background-color: var(--page-bg);
}
.container_page {
  --page-header-height: 44px;
  margin: 0;
  background-color: var(--page-bg);
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}
.van-list {
  margin-top: var(--gap);
}
.page_body {
  height: calc(100vh - var(--page-header-height));
  overflow: auto;
  box-sizing: border-box;
  background-color: var(--page-bg);
}
.card {
  margin: 0 var(--gap);
  background-color: var(--card-bg);
  border-radius: 10px;
  margin-bottom: 10px;
  .message {
    box-sizing: border-box;
    padding: var(--gap);
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      justify-content: flex-end;
    }
  }
  .order_status {
    font-size: 17px;
    font-weight: 700;
    color: #39404d;
    display: flex;
    align-items: center;
    .dot {
      width: 6px;
      height: 6px;

      border-radius: 50%;
      margin-right: 6px;
    }
    margin-bottom: 14px;
  }
  .order_brief {
    font-size: 13px;
    font-weight: 500;
    color: #646b80;
    margin-bottom: 6px;
    &:nth-last-child(1) {
      margin-bottom: 2px;
    }
  }
  .order_amount {
    font-size: 20px;
    font-weight: 700;
    color: #39404d;
  }

  .action {
    border-top: 1px #d2d8e2 solid;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    padding-right: var(--gap);
  }
  .to_pay {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    img {
      width: 6px;
      height: 10px;
      margin-left: 6px;
    }
  }
}
.home_renting {
  background-color: #1295FF;
}
.order_pendingPayment {
  background-color: #ffc855;
}
.shop_underInvestigation {
  background-color: #ffc855;
}
.points_completed {
  background-color: #4ce48a;
}
</style>
